<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽操作演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .demo-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .demo-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .controls {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-success {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
            color: white;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
        }

        .btn-warning {
            background: linear-gradient(45deg, #f093fb, #f5576c);
            color: white;
        }

        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(240, 147, 251, 0.4);
        }

        .info-panel {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .info-label {
            font-weight: bold;
            color: #555;
        }

        .info-value {
            color: #333;
            font-family: 'Courier New', monospace;
        }

        .demo-area {
            position: relative;
            height: 400px;
            border: 3px dashed #ddd;
            border-radius: 10px;
            background: #f8f9fa;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .draggable-item {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform 0.2s ease;
        }

        .draggable-item:hover {
            transform: scale(1.05);
        }

        .item-1 {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            top: 50px;
            left: 50px;
        }




        @media (max-width: 768px) {
            .header h1 {
                font-size: 2em;
            }
            
            .demo-area {
                height: 300px;
            }
            
            .draggable-item {
                width: 60px;
                height: 60px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎯 拖拽操作演示</h1>
            <p>在固定范围内自由拖拽元素，支持鼠标和触摸操作</p>
        </div>

        <div class="demo-section">
            <h2 class="demo-title">拖拽演示区域</h2>
            
            <div class="controls">
                <button class="btn btn-primary" onclick="setPosition('center')">居中显示</button>
                <button class="btn btn-success" onclick="setPosition('random')">随机位置</button>
                <button class="btn btn-warning" onclick="setPosition('custom')">自定义位置</button>
                <button class="btn btn-primary" onclick="resetPosition()">重置位置</button>
            </div>
            
            <div class="demo-area" id="demoArea">
                <div class="draggable-item item-1" data-item="1">拖拽元素</div>
            </div>
            
            <div class="info-panel">
                <h3>位置信息</h3>
                <div class="info-item">
                    <span class="info-label">当前位置:</span>
                    <span class="info-value" id="positionInfo">(0, 0)</span>
                </div>
                <div class="info-item">
                    <span class="info-label">边界范围:</span>
                    <span class="info-value" id="boundaryInfo">(0,0) - (0,0)</span>
                </div>
            </div>
        </div>

    </div>

    <script src="./drag-helper.js"></script>
    <script>
        let dragInstance = null;
        
        // 初始化拖拽功能
        function initDrag() {
            const item = document.querySelector('.draggable-item');
            dragInstance = new DragHelper(item, {
                constrainToParent: true,
                initialPosition: 'center', // 默认居中显示
                onStart: (data) => {
                    console.log('开始拖拽');
                    updatePositionInfo();
                },
                onMove: (data) => {
                    console.log('拖拽中', data);
                    updatePositionInfo();
                },
                onEnd: (data) => {
                    console.log('拖拽结束');
                    updatePositionInfo();
                }
            });
            
            // 初始化信息显示
            updatePositionInfo();
        }
        
        // 设置位置
        function setPosition(type) {
            if (!dragInstance) return;
            
            switch(type) {
                case 'center':
                    dragInstance.setInitialPosition();
                    break;
                case 'random':
                    dragInstance.options.initialPosition = 'random';
                    dragInstance.setInitialPosition();
                    break;
                case 'custom':
                    // 自定义位置：左上角
                    dragInstance.setPosition(1054, 0);
                    break;
            }
            
            updatePositionInfo();
        }
        
        // 重置位置
        function resetPosition() {
            if (!dragInstance) return;
            
            dragInstance.options.initialPosition = 'center';
            dragInstance.setInitialPosition();
            updatePositionInfo();
        }
        
        // 更新位置信息显示
        function updatePositionInfo() {
            if (!dragInstance) return;
            
            const position = dragInstance.getPosition();
            const boundary = dragInstance.getBoundary();
            
            document.getElementById('positionInfo').textContent = 
                `(${Math.round(position.x)}, ${Math.round(position.y)})`;
            document.getElementById('boundaryInfo').textContent = 
                `(0,0) - (${Math.round(boundary.right)}, ${Math.round(boundary.bottom)})`;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initDrag();
            console.log('拖拽演示已加载完成！');
        });
    </script>
</body>
</html>
